<template>
	<scroll-view scroll-y="true" class="main" @scrolltolower="lower()">
		<view class="list" v-for="(item,index) of list" :key="index" @click="detail(item.user.id)">
			<image :src="oss(item.user.avatar)" class="cover" mode=""></image>
			<view class="info">
				<view class="title">
					<view class="l">{{item.user.nickname}}</view>
					<!-- <view class="r">
						<u-icon name="map-fill" size="20" color="#428DFC"></u-icon>1.0km
					</view> -->
				</view>
				<view class="address">年龄：{{item.user.age}}</view>
				<view class="num">
					<view class="l"><text class="type">服务项目</text>
						<view class="word">{{item.skill.name}}</view>
					</view>
					<view class="r"><text class="icon">¥</text>{{item.skill.price}}</view>
				</view>
			</view>
		</view>



	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				finish: false,
				type: '',
				list: []
			};
		},
		onLoad(options) {
			this.getList()
		},
		methods: {
			detail(id) {
				uni.$u.route({
					url: 'pages/serve/detail',
					params: {
						id: id
					}
				})
			},
			lower() {
				this.page++
				this.getList()
			},
			getList() {
				if (this.finish) {
					return
				}
				uni.$u.http.post('/followlist', {
					page: this.page,
				}).then(res => {
					if (res.code == 1) {
						this.list = this.list.concat(res.data)
						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {

				})
			}
		}
	}
</script>

<style lang="scss">
	.main {
		height: 100vh;
		background: #F6F6F6;

		.list {
			display: flex;
			margin: 10rpx 20rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			position: relative;

			.cover {
				width: 170rpx;
				height: 170rpx;
				margin-right: 20rpx;
				flex-direction: 0;
				border-radius: 10rpx;
			}

			.address {
				font-size: 25rpx;
				color: #575859;
				margin: 10rpx 0 20rpx;
			}

			.vip {
				position: absolute;
				left: 0;
				top: 40rpx;
				width: 74rpx;
				height: 44rpx;

				.icon {
					width: 74rpx;
					height: 44rpx;
				}

				.word {
					width: 74rpx;
					height: 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #191615;
					font-size: 20rpx;
					position: absolute;
					left: 0;
					top: -10rpx;
					font-weight: bold;
				}
			}

			.info {
				flex: 1;

				.title {
					display: flex;
					align-items: center;

					.l {
						flex: 1;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: bold;
					}

					.r {
						color: #428DFC;
						font-size: 24rpx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
					}
				}

				.num {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.l {
						display: flex;
						align-items: center;

						.type {
							color: #999999;
							font-size: 24rpx;
						}

						.word {
							background-color: #FFFAE5;
							height: 36rpx;
							border-radius: 18rpx;
							color: #FF8007;
							font-size: 20rpx;
							padding: 0 20rpx;
							display: flex;
							align-items: center;
						}
					}

					.r {
						color: #FF5B1A;
						font-size: 40rpx;

						.icon {
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>
